<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>弹出层效果</title>
	<style>
       #A{
       	width: 100%;
       	height: 1888px;
       	background: gray;
       	display: none;
       	position: relative;
       }
       #B{
       	width: 200px;
       	height: 150px;
       	background: green;
       	border: 2px purple solid;
       	position: absolute;
       	left: 400px;
       	top: 200px;
       	display: none;
       }
       p{
       	width: 200px;
       	height: 15px;
       	background-color:gray;
       	margin-top: 0;

       }
       span{
       	float: right;
       	width: 12px;
       	height: 12px;
       
       }
	</style>
</head>
<body>
	<center><button>弹出层</button></center>
	<div id="A"></div>
	<div id="B">
		<p><span>x</span></p>
	</div>
</body>
</html>
<script>
	var nodea=document.getElementById('A');
	var node= document.getElementsByTagName('button');
	var nodeb=document.getElementById('B')
	var nodes=document.getElementsByTagName('span')
	node[0].onclick = function () {
		nodea.style.display='block';
		nodeb.style.display="block";
    nodes[0].onclick = function(){
    	nodea.style.display='none';
		nodeb.style.display="none";
    }
	}
</script>